<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="PowerPlatform认证备考（4）—— 如何创建画布应用, 码道诚公">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="baidu-site-verification" content="code-oqVlgh2wQV" />
    <meta name="google-site-verification" content="Z-8Fm46WY6NL_3kxilmoqToW4jnvyF7boTgciTLBXUs" />
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>PowerPlatform认证备考（4）—— 如何创建画布应用 | 码道诚公</title>
    <link rel="icon" type="image/png" href="/favicon.png">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">

    <script src="/libs/jquery/jquery.min.js"></script>

<meta name="generator" content="Hexo 5.2.0">
<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; }  .github-emoji > span { position: relative; z-index: 10; }  .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; }  .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
<link rel="alternate" href="/atom.xml" title="码道诚公" type="application/atom+xml">
<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>




<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/" class="waves-effect waves-light">
                    
                    <img src="/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">码道诚公</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/contact" class="waves-effect waves-light">
      
      <i class="fas fa-comments" style="zoom: 0.6;"></i>
      
      <span>留言板</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友情链接</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">码道诚公</div>
        <div class="logo-desc">
            
            Never really desperate, only the lost of the soul.
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			关于
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/contact" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-comments"></i>
			
			留言板
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友情链接
		</a>
          
        </li>
        
        
    </ul>
</div>


        </div>

        
    </nav>

</header>

    



<div class="bg-cover pd-header post-cover" style="background-image: url('/medias/featureimages/18.jpg')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">PowerPlatform认证备考（4）—— 如何创建画布应用</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="container content">

    
    <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/tags/PowerPlatform%E8%AE%A4%E8%AF%81/">
                                <span class="chip bg-color">PowerPlatform认证</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/categories/PowerPlatform/" class="post-category">
                                PowerPlatform
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2020-11-14
                </div>
                

                

                
                <div class="info-break-policy">
                    <i class="far fa-file-word fa-fw"></i>文章字数:&nbsp;&nbsp;
                    6.3k
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-clock fa-fw"></i>阅读时长:&nbsp;&nbsp;
                    22 分
                </div>
                

                
            </div>
        </div>
        <hr class="clearfix">
        <div class="card-content article-card-content">
            <div id="articleContent">
                <p>Power Apps使每个人都可以实施自定义且功能强大的业务解决方案。 该模块将引导您完成构建第一个应用程序所需的所有知识。 在本模块结束时，您将准备开始构建自己的业务应用程序。</p>
<p>在本模块中，您将：</p>
<ul>
<li>了解Power Apps的基本元素</li>
<li>构建画布应用</li>
<li>自定义应用程序的元素</li>
<li>配置和管理应用程序设置</li>
</ul>
<h2 id="学习基本元素"><a href="#学习基本元素" class="headerlink" title="学习基本元素"></a>学习基本元素</h2><p>Power Apps有许多不同的组件来构建解决方案，包括屏幕、输入、图库、表单等等。让我们学习一下您入门需要的一些最常见的元素。</p>
<h3 id="Power-Apps-Studio"><a href="#Power-Apps-Studio" class="headerlink" title="Power Apps Studio"></a>Power Apps Studio</h3><p>Power Apps Studio是用于构建应用程序的Web界面的名称。 使用Power Apps，无需下载或安装用于构建应用程序的客户端。 通过登录<a target="_blank" rel="noopener" href="https://make.powerapps.com/">https://make.PowerApps.com</a>，浏览器完成所有操作。</p>
<h3 id="App-format"><a href="#App-format" class="headerlink" title="App format"></a>App format</h3><p>创建应用程序的第一步是选择应用程序的格式:移动端或平板电脑。虽然这两种格式都可以在移动设备、平板电脑或电脑上互换使用，但它们都有不同的屏幕和控件默认大小。一旦你选择了应用程序的格式，你就不能改变它了。</p>
<h3 id="Galleries"><a href="#Galleries" class="headerlink" title="Galleries"></a>Galleries</h3><p>Gallery控件用于显示数据表中的记录。然后，记录的显示由模板定义，您可以自定义模板以满足您的需要。这使您可以控制显示哪些字段以及如何格式化它们。 然后，Power Apps将自动将此模板应用于数据中的每个记录。</p>
<h3 id="Forms"><a href="#Forms" class="headerlink" title="Forms"></a>Forms</h3><p>表单通常专注于处理特定记录，通常基于Gallery的选择。 在这种体验中，用户浏览图库以查找并选择所需的记录，以在表单上显示详细信息。 表单使用户不仅可以查看详细信息，还可以保存新记录并编辑现有记录。 表单执行的各种动作由表单模式控制，从而使表单有多种用途。</p>
<h3 id="Input-Controls"><a href="#Input-Controls" class="headerlink" title="Input Controls"></a>Input Controls</h3><p>为了在自定义应用程序方面提供最大的灵活性，Power Apps提供了多种输入控件。 文本输入、按钮、下拉框、切换、日期选择器和滑块就是一些例子。您可以将这些控件添加到图库，表单和屏幕中，以为您的应用程序构建功能和美观的体验。 所有输入都具有默认数据，格式和操作的多种设置，这些设置允许您构建一个应用程序，为您的业务流程提供合适的用户体验。</p>
<h3 id="Intelligent-Controls"><a href="#Intelligent-Controls" class="headerlink" title="Intelligent Controls"></a>Intelligent Controls</h3><p>除了上面提到的常见输入之外，Power应用程序还为更高级的操作提供了一组丰富的控件。有基于硬件的控件，这些控件允许访问摄像头，条形码扫描仪，GPS和更多硬件功能。 还有支持服务的控件，例如名片阅读器或对象检测器，使您无需编写代码即可向应用程序添加人工智能。</p>
<h3 id="Functions"><a href="#Functions" class="headerlink" title="Functions"></a>Functions</h3><p>函数是将所有这些控件，输入和数据源绑定在一起的粘合剂。 您可以使用一个或多个函数在应用程序中创建公式。 这些公式与您在Excel中使用的语言相似，可用于诸如将数据发送到数据源，格式化信息，创建动画等操作。 无需复杂的代码，只需强大的函数和简单的输入即可增强您的应用程序。</p>
<p>现在，您已概述了Power Apps可以实现的一些丰富功能，下一节将带您逐步构建第一个应用程序。</p>
<h2 id="构建画布应用"><a href="#构建画布应用" class="headerlink" title="构建画布应用"></a>构建画布应用</h2><p>在本单元中，您将生成一个画布应用程序，其中数据源是存储在Microsoft OneDrive for Business中的Microsoft Excel工作簿。 此Excel工作簿具有Contoso Manufacturing拥有的不同建筑物的表。 如今，他们必须在人们前往不同位置进行更新时，通过电子邮件发送人与人之间的共享工作簿。 借助Power Apps画布应用程序，他们将能够直接从手机中查看建筑物。 此外，他们还将能够编辑信息，甚至添加新建筑物。</p>
<p>本示例使用Excel，但请记住，您可以使用来自许多其他来源的数据，包括通用数据服务，Microsoft SharePoint，Salesforce等云服务以及Microsoft SQL Server等本地来源。 无论您身在何处，这都使您可以灵活地从数据中构建应用程序。 您还可以在Power Apps中组合数据源，以轻松地在不同数据源之间创建关联。</p>
<p>如果您没有可用的Power Apps帐户，则可以注册免费的Power Apps社区计划。 这将使您能够在自己的环境中学习和探索Power Apps。 有关更多信息并进行注册，请访问<a target="_blank" rel="noopener" href="https://powerapps.microsoft.com/communityplan/%E3%80%82">https://powerapps.microsoft.com/communityplan/。</a></p>
<p>Power Apps创建者的基本过程如下所示：</p>
<ul>
<li>确定Power Apps可以满足的业务需求</li>
<li>连接到Power Apps中的任何必要数据</li>
<li>使用控件，按钮和易于使用的界面设计应用程序，供最终用户与数据进行交互以实现业务需求</li>
<li>保存并发布应用程序并测试功能</li>
<li>一旦感到满意，便可以与最终用户共享该应用程序，从而为他们提供更好的业务流程</li>
</ul>
<h3 id="连接到数据源"><a href="#连接到数据源" class="headerlink" title="连接到数据源"></a>连接到数据源</h3><p>要连接到数据源，请遵循以下步骤：</p>
<ol>
<li>下载<a target="_blank" rel="noopener" href="https://github.com/MicrosoftDocs/mslearn-build-app-solution/raw/master/downloads/Contoso-Site-Tracking.zip">Contoso文件</a>，解压缩所有文件并将其保存到您的OneDrive for Business中。</li>
<li>转到<a target="_blank" rel="noopener" href="https://make.powerapps.com/">https://make.powerapps.com</a> 并使用您的组织帐户登录。</li>
<li>在左侧窗格中，选择Create。</li>
<li>从“从数据开始”部分中选择“其他数据源”。</li>
<li>在“连接”下，选择“ OneDrive for Business”。 如果没有可用的连接，请单击“新建连接”以创建一个。</li>
<li>在右边选择Excel文件，选择Contoso Site Tracking.xlsx文件。</li>
<li>对于“选择表”，单击“ SiteInspector”，然后单击“连接”。</li>
</ol>
<p><img src="/posts/a24a8abd/site-inspector.png" alt="App published view"></p>
<p>Power Apps通过检查您的数据并将其与Power Apps功能进行匹配来生成应用程序，以便您以可运行的应用程序为起点。 生成的应用程序始终基于单个列表或表，但是您可以稍后向该应用程序添加更多数据。</p>
<h3 id="探索生成的应用"><a href="#探索生成的应用" class="headerlink" title="探索生成的应用"></a>探索生成的应用</h3><p>现在，新的三屏应用程序将在Power Apps Studio中打开。</p>
<p>下图显示了Power Apps Studio的主要开发窗口，您将在以后的单元中了解更多信息。</p>
<p><img src="/posts/a24a8abd/power-apps-edit.png" alt="App editor view"></p>
<p>选择右上角的“播放”以练习使用该应用程序。注意，它包含了表格中的所有数据，并提供了良好的默认体验。</p>
<p>从数据生成的所有应用程序都具有相同的屏幕集，您可以从“屏幕”窗格中查看这些屏幕：</p>
<ul>
<li><strong>Browse screen -</strong> 默认情况下显示此屏幕。 在其中，您可以浏览，排序，搜索和刷新数据源中的数据。 在浏览屏幕中，可以通过选择加号（+）将条目添加到数据源。</li>
<li><strong>Details screen -</strong> 详细信息屏幕显示有关单个项目的所有信息。 在此屏幕中，您可以打开一个条目进行编辑或删除。</li>
<li><strong>Edit/create screen -</strong> 在此屏幕中，您可以编辑现有项目或创建新项目。</li>
</ul>
<p>通过选择右上角的“ X”，退出预览模式。 为了使您的应用在手机上可见，需要将其保存。选择File，另存为。将当前标题“App”替换为Contoso Site Tracking App，然后选择Save。当所有更改都成功保存时，您将看到一个绿色的复选标记。现在你可以在手机上打开这个应用了。</p>
<h3 id="在您的设备上安装应用"><a href="#在您的设备上安装应用" class="headerlink" title="在您的设备上安装应用"></a>在您的设备上安装应用</h3><p>要查看该应用程序如何在移动设备上运行，请在您的手机上安装Power Apps移动应用程序。在构建应用程序时，您应该以与用户相同的外形尺寸对其进行测试。</p>
<ol>
<li>从应用商店中下载要使用的平台的Power Apps Mobile。</li>
<li>使用您的用户名和密码登录。</li>
<li>在手机或平板电脑上，在Power Apps Mobile中运行Contoso网站跟踪应用程序。 如果您不想安装该应用程序，则可以在浏览器中运行它。</li>
</ol>
<p>如果您要创建的应用程序将在移动设备上使用，那么最好检查Power App在移动设备上的外观和运行方式，以便为用户提供最佳体验。</p>
<h3 id="探索应用"><a href="#探索应用" class="headerlink" title="探索应用"></a>探索应用</h3><p>现在您已经生成了Contoso站点跟踪应用程序，您应该花几分钟时间来浏览该应用程序并探索其设计。请注意如何使用图库浏览Excel文件中的记录(行)。然后，当您单击一条记录时，您将进入一个不同的屏幕，其中一个窗体控件显示附加的详细信息。该应用程序还包括编辑这些记录甚至制作新记录的能力。一个非常实用的应用程序。</p>
<h4 id="探索浏览页"><a href="#探索浏览页" class="headerlink" title="探索浏览页"></a>探索浏览页</h4><p>该应用程序中的每个屏幕都有多个控件，但是一个控件会占用大部分屏幕空间。 应用程序中的第一个屏幕是浏览屏幕，默认情况下命名为BrowseScreen1。</p>
<p>您将要熟悉的浏览屏幕中的控件包括：</p>
<ul>
<li><strong>BrowseGallery1</strong> - 该控件占据了大部分屏幕，并显示了来自数据源的数据。</li>
<li><strong>NextArrow1</strong> - 选择此控件后，它将打开详细信息屏幕。</li>
<li><strong>IconNewItem1</strong> - 选择此控件后，它将打开编辑/创建屏幕。</li>
</ul>
<p><img src="/posts/a24a8abd/controls.png" alt="Published view highlighted controls"></p>
<h4 id="探索详情页"><a href="#探索详情页" class="headerlink" title="探索详情页"></a>探索详情页</h4><p>默认情况下，详细信息屏幕名为DetailScreen1。 其中一些控件如下：</p>
<ul>
<li><strong>DetailForm1</strong> - 该控件包含其他控件，并包含要显示的记录的每个字段的数据卡。</li>
<li><strong>Title_DataCard1</strong> - 这是一个卡片控件。每张卡片代表记录的单个字段。在本例中，它显示了Site Inspector表中的标题，如上一个单元所示。</li>
<li><strong>IconEdit1</strong> - 选择此控件后，它将打开“编辑/创建”屏幕，以便用户可以编辑当前项目。</li>
</ul>
<p><img src="/posts/a24a8abd/details-screen.png" alt="Details screen with highlighted controls"></p>
<h4 id="探索编辑、创建页"><a href="#探索编辑、创建页" class="headerlink" title="探索编辑、创建页"></a>探索编辑、创建页</h4><p>应用程序中的第三个屏幕是EditScreen1。 它的一些控件包括：</p>
<ul>
<li><strong>EditForm1</strong> - 该控件包含其他控件，并且包含一个用于正在编辑的记录的每个字段的数据卡。</li>
<li><strong>Address_DataCard2</strong> - 这是一个卡片控件，它显示了Site Inspector表中的地址，如上一单元所示。</li>
<li><strong>IconAccept1</strong> - 选择此控件后，它将保存用户的更改。</li>
</ul>
<p><img src="/posts/a24a8abd/power-apps-edit-screen.png" alt="Edit screen with highlighted controls"></p>
<h3 id="定制化应用"><a href="#定制化应用" class="headerlink" title="定制化应用"></a>定制化应用</h3><p>尽管默认屏幕是一个开箱即用时的应用程序，但您通常会需要自定义生成的应用程序以满足您的需求。以下各节介绍了该应用程序中每个屏幕的基本更改。 您可以做很多事情来定制应用程序，但是开始学习的最好方法是采用生成的应用程序并进行通用的定制。 这将使您熟悉控件，布局和功能。</p>
<h4 id="浏览页"><a href="#浏览页" class="headerlink" title="浏览页"></a>浏览页</h4><p>Contoso网站跟踪应用程序已经为每个产品显示了图像和一些文本，但是布局可能会更好。 要改善布局，请使用以下过程：</p>
<ol>
<li>在左边的Screens窗格中，选择BrowseGallery1。图库周围的选择框确认您的选择。<img src="/posts/a24a8abd/browse-screen.png" alt="Browse screen"></li>
<li>在右窗格中，通过选择“布局”旁边的下拉菜单来打开“数据”窗格。<img src="/posts/a24a8abd/layout-templates.png" alt="Layout templates"></li>
<li>选择布局图像<strong>Image</strong>，标题<strong>title</strong>和副标题<strong>subtitle</strong>以使外观更清晰。</li>
<li>选择图库顶部项目的<strong>Address</strong><img src="/posts/a24a8abd/power-apps-text-edit-view.png" alt="Text edit view"></li>
<li>在编辑栏中将ThisItem.Address更改为ThisItem.Title。</li>
<li>重复前面的两个步骤，但是将另一个Label控件更改为显示每个项目的描述，方法是将其设置为ThisItem.Description。<img src="/posts/a24a8abd/power-apps-text-preview.png" alt="Text edit confirmed preview"></li>
</ol>
<p>更改一个图库的布局和它所显示的数据类型就这么简单，而且您可能会发觉它也很有趣。</p>
<h4 id="添加额外的数据源"><a href="#添加额外的数据源" class="headerlink" title="添加额外的数据源"></a>添加额外的数据源</h4><p>有时在创建画布应用程序时，您需要合并来自多个数据源的数据。 这一切都将取决于您的需求以及您希望通过canvas应用程序完成的工作。</p>
<p>请按照以下步骤将Office 365 Outlook添加为附加的数据源。 这只是可用于扩展画布应用程序数据的众多来源之一。</p>
<ol>
<li>选择View &gt; Data sources以打开Data窗格。</li>
<li>在搜索栏中，键入或粘贴Office 365 Outlook的前几个字母：<img src="/posts/a24a8abd/canvas-app-outlook.png" alt="Office 365 Outlook in data sources list"></li>
<li>选择Connect，如果提示登录，请输入您的工作帐户。</li>
</ol>
<p>Office 365 Outlook连接已创建并添加到您的应用程序。 现在，可以使用了。</p>
<p>有关可以使用Office 365 Outlook连接器执行的命令类型，请参阅此文档：<a target="_blank" rel="noopener" href="https://docs.microsoft.com/en-us/connectors/office365/">/connectors/office365/</a>。</p>
<h4 id="详情页"><a href="#详情页" class="headerlink" title="详情页"></a>详情页</h4><p>在详细信息屏幕上，您想要更改字段的顺序。 此屏幕上的控件与浏览屏幕上的控件不同，因此更改它们的过程也略有不同。</p>
<ol>
<li>在左侧的树视图中，选择DetailScreen1&gt; DetailForm1。 这将更改工作页面中显示的屏幕。</li>
<li>在右边窗格中，选择Edit fields。<img src="/posts/a24a8abd/detail-edit-form.png" alt="Detail edit form"></li>
<li>单击Fields部分顶部的+ Add field按钮。</li>
<li>您可以在此处添加默认情况下未添加的任何数据源字段。 选中“标题和子标题”旁边的框，然后单击“添加”。</li>
<li>现在，您可以通过单击并按住标题，然后将其拖到屏幕顶部来重新排列顺序。</li>
<li>您还可以删除不想显示给用户的字段，例如ID列。 从“字段”列表中，单击“ ID”以将其展开，单击“…”，然后选择“ X删除”。</li>
</ol>
<p><img src="/posts/a24a8abd/field-edit-form-view.png" alt="field edit form view"></p>
<h4 id="编辑页"><a href="#编辑页" class="headerlink" title="编辑页"></a>编辑页</h4><p>在用户编辑和创建条目的屏幕上，您希望使他们更容易在文本框中输入信息。</p>
<ol>
<li>在左侧的树视图中，选择EditScreen1&gt; EditForm1。</li>
<li>在右边窗格中，选择Edit fields。</li>
<li>展开<strong>Description</strong>。为控件类型选择下拉箭头，然后选择“编辑多行文本”。<img src="/posts/a24a8abd/control-text-edit-options.png" alt="Control text edit options"></li>
<li>多行编辑控件将简化用户在该字段中添加多个单词的能力。您还可以对字段进行重新排序，以匹配来自详细信息屏幕的顺序，从而为用户提供更一致的体验。</li>
</ol>
<p>几个基本步骤就可以极大地改善应用程序的外观和使用体验，Power Apps Studio提供了许多定制这些应用程序的选项。</p>
<h2 id="Power-Apps中的控件"><a href="#Power-Apps中的控件" class="headerlink" title="Power Apps中的控件"></a>Power Apps中的控件</h2><p>控件是产生动作或显示信息的UI元素。 Power Apps中的许多控件与您在其他应用程序中使用的控件相似：标签，文本输入框，下拉列表，导航元素等。</p>
<p>除了这些典型控件外，Power Apps还具有更多专门的控件，您可以在“插入”选项卡上找到它们。</p>
<p><img src="/posts/a24a8abd/control-type-list.png" alt="Control type list"></p>
<p>一些控件可以增加你的应用程序的兴趣和影响，包括：</p>
<ul>
<li><strong>Galleries</strong> - 这些控件是布局容器，其中包含一组控件，这些控件显示来自数据源的记录。</li>
<li><strong>Forms</strong> - 这些控件显示有关数据的详细信息，并允许您创建和编辑记录。</li>
<li><strong>Media</strong> - 这些控件可让您添加背景图像，包括摄像头按钮（以便用户可以从应用程序中拍照），用于快速捕获标识信息的条形码读取器等。</li>
<li><strong>Charts</strong> - 这些控件使您可以添加图表，以便用户在旅途中进行即时分析。</li>
</ul>
<p>若要查看可用的控件，请选择“插入”选项卡，然后依次选择每个选项。</p>
<h2 id="Power-Apps中的Function"><a href="#Power-Apps中的Function" class="headerlink" title="Power Apps中的Function"></a>Power Apps中的Function</h2><p>使用Microsoft Power Apps时，您不必像传统开发人员那样编写复杂的应用程序代码。 但是，您必须在应用程序中表达逻辑并控制其导航，过滤，排序和其他功能。 这就是公式的用处。</p>
<p>如果您使用过Microsoft Excel功能，则可以在Power Apps中轻松构建应用程序。 要创建公式，您需要将一个或多个公式与必需参数和可选参数结合使用。 以下是一些常用功能及其作用说明：</p>
<ul>
<li>Filter - 此函数通常与画廊或数据表一起使用，以缩小从数据源返回的记录的范围。 您可以通过在数据集中指定一个或多个列来执行逻辑测试来执行此操作，这将允许您返回属于特定日期范围，具有设置值或由用户创建的数据。</li>
<li>Match - 这个函数允许您检查一个值，看它是否遵循给定的模式。您可以使用它来检查用户是否在输入字段中输入了正确格式的电子邮件地址，以及用户是否没有显示需要有效电子邮件的警告。 此函数能很好地用于条件格式化。</li>
<li>Distinct - 此函数允许您从数据列表中返回惟一的值，从而更容易构建只向用户显示给定字段的有效值的动态下拉列表。</li>
<li>Math functions - Power Apps包括一系列数学公式，可用于处理数据，从简单的Sum或Average到复杂的Atan和Sin，再到处理弧度。</li>
</ul>
<p>这是可用的Power Apps功能大库的一个小样本。 另外，请记住，您可以将函数组合为一个公式来解决复杂的问题。 这就是平台的力量。 您从简单的公式开始，然后随着熟悉度的提高，您将学会将它们结合起来。</p>
<p>有关Power Apps中可用的所有功能的完整列表，请参阅<a target="_blank" rel="noopener" href="https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/formula-reference#s">此处</a>的文档。 要了解有关使用公式的更多信息，请查看Microsoft学习路径 - <a target="_blank" rel="noopener" href="https://docs.microsoft.com/en-us/learn/paths/use-basic-formulas-powerapps-canvas-app/">Use basic formulas to make better Power Apps canvas apps</a>。</p>
<h2 id="分享App"><a href="#分享App" class="headerlink" title="分享App"></a>分享App</h2><p>现在，您已经创建了一个应用程序，您可以与特定的用户，组或整个组织共享该应用程序。 当您与其他人共享应用时，他们可以在浏览器中运行该应用，也可以在Apple iOS和Google Android的播放器中运行该应用。</p>
<p>更好的是，您可以授予某人更新应用程序的权限。</p>
<p>作为应用程序创建者，与他人分享应用程序是开发的最终步骤。 您将要与一些利益相关者共享该应用程序以测试全部功能。 这将使他们有机会提供反馈并帮助您成为更好的应用程序创建者。</p>
<h3 id="准备共享应用"><a href="#准备共享应用" class="headerlink" title="准备共享应用"></a>准备共享应用</h3><p>要完成以下步骤，请在“编辑”模式下打开要共享的应用程序。</p>
<ol>
<li>在Power Apps Studio中，选择File菜单，然后选择Save as，然后选择cloud。</li>
<li>单击右下角的Save。</li>
<li>成功保存应用程序后，单击Share。</li>
<li>在“共享”选项卡上，指定要与之共享应用程序的用户或组。如果需要添加组织中的所有人，请键入Everyone，并选择”<strong>Everyone</strong> in <strong>Company Name</strong>“。如果需要与大量用户共享，则最佳实践是通过Azure Active Directory安全组共享。默认情况下，用户收到用户权限。 如果您希望该用户也能够编辑该应用程序，则选择”共同所有者“复选框。 以下是这两种权限的说明：<ol>
<li><strong>Co-owner</strong> - 用户可以使用、编辑和共享该应用程序，但不能删除或更改所有者。</li>
<li><strong>User</strong> - 用户可以查看和使用该应用程序，但不能更改它。</li>
</ol>
</li>
<li>考虑安全组。<ol>
<li>如果您与安全组共享应用，则该组的现有成员以及加入该应用的任何人都将具有您为该组指定的权限。 离开小组的任何人都将失去该权限，除非他们属于具有访问权限的另一个小组，或者您以个人身份授予他们权限。</li>
<li>安全组的每个成员都对应用程序具有与整个组相同的权限。 但是，您可以为该组的一个或多个成员指定更大的权限，以允许他们更大的访问权限。 例如，您可以向安全组A授予运行应用程序的权限，但也可以向属于该组的用户B授予共同所有者权限。 安全组的每个成员都可以运行该应用程序，但是只有用户B可以对其进行编辑。 如果您授予安全组A共同所有者权限和用户B运行该应用程序的权限，则用户B仍可以编辑该应用程序。</li>
</ol>
</li>
<li>要通过电子邮件通知用户，请选中“向新用户发送电子邮件邀请”复选框。如果您选择通过电子邮件通知用户，则与该应用共享的每个人都会收到一封电子邮件，其中包含该应用的链接。 您为应用程序授予共同所有者权限的人还将获得Power Apps Studio中“编辑应用程序”的链接。</li>
<li>单击Share。如果你对共享应用程序进行了更改并保存了这些更改，那么当你发布这些更改时，与你共享这些更改的人就会看到你的更改。如果您改进了应用程序，这可能会很有用，但是如果您删除或显著改变功能，也会对用户产生负面影响。 记住要创建一个通知计划，以提醒用户重大更新。</li>
</ol>
<h3 id="授权和许可"><a href="#授权和许可" class="headerlink" title="授权和许可"></a>授权和许可</h3><p>您应该了解一些有关权限和许可的基本信息：</p>
<ul>
<li>用户和贡献者需要共享应用程序使用的任何数据连接和网关的权限。</li>
<li>应用程序暗含一些权限，但是您必须显式授予其他权限。</li>
<li>如果您创建基于Common Data Service的应用程序，则还必须确保与您共享应用程序的用户对应用程序所依赖的一个或多个实体具有适当的权限。 具体来说，这些用户必须属于一个安全角色，该角色可以执行创建、读取、写入和删除相关记录等任务。</li>
<li>在许多情况下，您需要创建一个或多个具有用户运行应用程序所需的确切权限的自定义安全角色。 然后，您可以根据需要为每个用户分配一个角色。</li>
</ul>
<p>共享应用程序很简单，这是使您发现有用的应用程序可供组织中的所有人使用的好方法。</p>
<h2 id="Knowledge-check"><a href="#Knowledge-check" class="headerlink" title="Knowledge check"></a>Knowledge check</h2><ol>
<li><p>Your sales team is in desperate need of a mobile application that can display records living in a SharePoint list. When displaying the records, multiple pieces of information about each record need to be visible to the user. Which of the following Power Apps tools would you use when designing your app to achieve this functionality?</p>
<ul>
<li><p>Create a gallery to display the sales records.</p>
<p>【Correct.】 Galleries are used to display tables of data from your data source. They are highly customizable, so you can show whatever information about a particular record that is necessary. You could then use a Form to edit individual records, if desired.</p>
</li>
<li><p>Create a form to display the sales records.</p>
</li>
<li><p>Create an input control to display the sales records.</p>
</li>
</ul>
</li>
<li><p>You have been tasked with creating a Power App that can scan barcodes that will display the scanned item’s information on the screen. Out of the following control options, which one would the barcode scanner fall under?</p>
<ul>
<li><p>Galleries</p>
</li>
<li><p>Media</p>
<p>【Correct.】 The barcode scanner control is a part of the Media category of controls. This control can be used to scan barcodes of various types and pass information about the barcode to the Power App. Then, additional Functions can use that barcode information to perform additional tasks.</p>
</li>
<li><p>Forms</p>
</li>
</ul>
</li>
<li><p>You have a gallery control in your app for displaying all customer orders. Your manager says she would like to see orders from the last 90 days in addition. How would you reduce the amount of data she sees?</p>
<ul>
<li><p>You would modify the data source to purge out all orders older than 90 days.</p>
</li>
<li><p>Use the data filtering wizard.</p>
</li>
<li><p>Create a formula for your gallery that uses the Filter function.</p>
<p>【Correct.】 The Filter function allows you to apply logic tests to one or more columns in your data source. For this scenario you could filter out data where the Order Date is less than 90 days ago.</p>
</li>
</ul>
</li>
</ol>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>Power Apps允许您构建自定义业务应用程序，以创建功能强大的新解决方案，并有可能提高通信和数据领域的流程效率。 现在，您已经构建了第一个应用程序，请考虑可以从业务中的自定义解决方案中受益的领域。 首先考虑使您感到沮丧的流程，并考虑如何利用Power Apps改善每个人的流程。</p>
<p>现在，您已经阅读了本模块，您应该能够：</p>
<ul>
<li>了解Power Apps的基本要素</li>
<li>构建画布应用</li>
<li>自定义应用程序的元素</li>
<li>分享您创建的应用</li>
</ul>
<h3 id="关键点"><a href="#关键点" class="headerlink" title="关键点"></a>关键点</h3><p>这里有三个要点：</p>
<ol>
<li>Power Apps可以引用应用程序中的元素以创建动态解决方案和友好的界面。</li>
<li>通过无限的自定义选项，Power Apps可用于增强任何业务流程。</li>
<li>即使对于没有计算机编程背景的人，创建和管理应用程序也简单易学。</li>
</ol>
<h3 id="资源"><a href="#资源" class="headerlink" title="资源"></a>资源</h3><h4 id="Power-Apps"><a href="#Power-Apps" class="headerlink" title="Power Apps"></a>Power Apps</h4><ul>
<li><a target="_blank" rel="noopener" href="https://powerapps.microsoft.com/">Power Apps</a></li>
<li><a target="_blank" rel="noopener" href="https://powerapps.microsoft.com/blog/microsoft-powerapps-learning-resources/">Power Apps Resources</a></li>
</ul>
<h4 id="进一步学习"><a href="#进一步学习" class="headerlink" title="进一步学习"></a>进一步学习</h4><ul>
<li><a target="_blank" rel="noopener" href="https://docs.microsoft.com/en-us/learn/modules/navigation-canvas-app/">Navigation in a canvas app in Power Apps</a></li>
<li><a target="_blank" rel="noopener" href="https://docs.microsoft.com/en-us/learn/modules/customize-apps-in-powerapps/">Customize a canvas app in Power Apps</a></li>
<li><a target="_blank" rel="noopener" href="https://docs.microsoft.com/en-us/learn/modules/manage-apps-in-powerapps/index">Manage Apps in Power Apps</a></li>
</ul>

            </div>
            <hr/>

            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        文章作者:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="/about" rel="external nofollow noreferrer">Guo Yaxiang</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        文章链接:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="https://www.codinghonest.space/posts/a24a8abd.html">https://www.codinghonest.space/posts/a24a8abd.html</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        版权声明:
                    </i>
                </span>
                <span class="reprint-info">
                    本博客所有文章除特別声明外，均采用
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    许可协议。转载请注明来源
                    <a href="/about" target="_blank">Guo Yaxiang</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/tags/PowerPlatform%E8%AE%A4%E8%AF%81/">
                                    <span class="chip bg-color">PowerPlatform认证</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css">
<div id="article-share">

    
    <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.4rem;
        line-height: 38px;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title">你的赏识是我前进的动力</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="/medias/reward/alipay.png" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="/medias/reward/wechat.png" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>

            
        </div>
    </div>

    

    

    

    

    

    
        <style>
    .mvaline-card {
        margin: 1.5rem auto;
    }

    .mvaline-card .card-content {
        padding: 20px 20px 5px 20px;
    }
</style>

<div class="card mvaline-card" data-aos="fade-up">
    <div class="comment_headling" style="font-size: 20px; font-weight: 700; position: relative; padding-left: 20px; top: 15px; padding-bottom: 5px;">
        <i class="fas fa-comments fa-fw" aria-hidden="true"></i>
        <span>评论</span>
    </div>
    <div id="mvcomments" class="card-content" style="display: grid">
    </div>
</div>

<script src="/libs/minivaline/MiniValine.js"></script>
<script>
    new MiniValine({
        el: '#mvcomments',
        appId: 'oqAo7rCWejwTqHjGC2APTVDX-MdYXbMMI',
        appKey: 'pfyY919tO7iJaDm7lFmvh5Wp',
        mode: 'DesertsP',
        placeholder: 'Write a Comment',
        pathname: window.location.pathname,
        lang: '',
        adminEmailMd5: '8BBC105436DAAF8C803841C8FD13CD0C',
        tagMeta: ["管理员", "小伙伴", "访客"],
        master: ["8BBC105436DAAF8C803841C8FD13CD0C"],
        friends: ["FA21C7921CD42FE9523E957870873F64", "586BAB41BB5692877F7714DFE4947DEC"],
        math: true,
        md: true,
        enableQQ: false,
        NoRecordIP: false,
        visitor: true,
        maxNest: 6,
        pageSize: 6,
        serverURLs: '',
        emoticonUrl: ["https://cdn.jsdelivr.net/npm/alus@latest", "https://cdn.jsdelivr.net/gh/MiniValine/qq@latest", "https://cdn.jsdelivr.net/gh/MiniValine/Bilibilis@latest", "https://cdn.jsdelivr.net/gh/MiniValine/tieba@latest", "https://cdn.jsdelivr.net/gh/MiniValine/twemoji@latest", "https://cdn.jsdelivr.net/gh/MiniValine/weibo@latest"],
    });
</script>

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;上一篇</div>
            <div class="card">
                <a href="/posts/31a47d0f.html">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/13.jpg" class="responsive-img" alt="PowerPlatform认证备考（5）—— Power Apps门户介绍">
                        
                        <span class="card-title">PowerPlatform认证备考（5）—— Power Apps门户介绍</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            微软PowerPlatform认证考试的相关备考知识.
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2020-11-16
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/PowerPlatform/" class="post-category">
                                    PowerPlatform
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/PowerPlatform%E8%AE%A4%E8%AF%81/">
                        <span class="chip bg-color">PowerPlatform认证</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/posts/62451831.html">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/18.jpg" class="responsive-img" alt="PowerPlatform认证备考（3）—— Power Apps介绍">
                        
                        <span class="card-title">PowerPlatform认证备考（3）—— Power Apps介绍</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            微软PowerPlatform认证考试的相关备考知识.
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-11-13
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/PowerPlatform/" class="post-category">
                                    PowerPlatform
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/PowerPlatform%E8%AE%A4%E8%AF%81/">
                        <span class="chip bg-color">PowerPlatform认证</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>


<script>
    $('#articleContent').on('copy', function (e) {
        // IE8 or earlier browser is 'undefined'
        if (typeof window.getSelection === 'undefined') return;

        var selection = window.getSelection();
        // if the selection is short let's not annoy our users.
        if (('' + selection).length < Number.parseInt('120')) {
            return;
        }

        // create a div outside of the visible area and fill it with the selected text.
        var bodyElement = document.getElementsByTagName('body')[0];
        var newdiv = document.createElement('div');
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';
        bodyElement.appendChild(newdiv);
        newdiv.appendChild(selection.getRangeAt(0).cloneContents());

        // we need a <pre> tag workaround.
        // otherwise the text inside "pre" loses all the line breaks!
        if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
            newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
        }

        var url = document.location.href;
        newdiv.innerHTML += '<br />'
            + '来源: 码道诚公<br />'
            + '文章作者: Guo Yaxiang<br />'
            + '文章链接: <a href="' + url + '">' + url + '</a><br />'
            + '本文章著作权归作者所有，任何形式的转载都请注明出处。';

        selection.selectAllChildren(newdiv);
        window.setTimeout(function () {bodyElement.removeChild(newdiv);}, 200);
    });
</script>


<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/libs/codeBlock/codeShrink.js"></script>


<!-- 代码块折行 -->

<style type="text/css">
code[class*="language-"], pre[class*="language-"] { white-space: pre !important; }
</style>


    

</main>




    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/libs/aplayer/APlayer.min.css">
<style>
    .aplayer .aplayer-lrc p {
        
        display: none;
        
        font-size: 12px;
        font-weight: 700;
        line-height: 16px !important;
    }

    .aplayer .aplayer-lrc p.aplayer-lrc-current {
        
        display: none;
        
        font-size: 15px;
        color: #42b983;
    }

    
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0px !important;
    }

    
</style>
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="netease"
                   type="playlist"
                   id="503838841"
                   fixed='true'
                   autoplay='false'
                   theme='#42b983'
                   loop='all'
                   order='random'
                   preload='auto'
                   volume='0.7'
                   list-folded='true'
        >
        </meting-js>
    </div>
</div>

<script src="/libs/aplayer/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    
    <div class="container row center-align" style="margin-bottom: 0px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            
                <span id="year">2020-2021</span>
            
            <span id="year">2020</span>
            <a href="/about" target="_blank">Guo Yaxiang</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            
            
            
            
            <br>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link ">
    <a href="https://github.com/GuoYaxiang" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:YXGyxg112358@163.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1431800679" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 1431800679" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>





    <a href="https://www.zhihu.com/people/guo-ya-xiang" class="tooltipped" target="_blank" data-tooltip="关注我的知乎: https://www.zhihu.com/people/guo-ya-xiang" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">知</i>
    </a>



    <a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>

</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/js/search.js"></script>
<script type="text/javascript">
$(function () {
    searchFunc('/search.xml', 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/libs/materialize/materialize.min.js"></script>
    <script src="/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/libs/aos/aos.js"></script>
    <script src="/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/libs/others/clicklove.js" async="async"></script>
    
    

    
        <script src="//code.tidio.co/zgiqinzrat1rzwxseqhr2pnzsp2a4rjo.js"></script>
        <script>
            $(document).ready(function () {
                setInterval(change_Tidio, 50);
                function change_Tidio() {
                    var tidio=$("#tidio-chat iframe");
                    if(tidio.css("display")=="block"&& $(window).width()>977 ){
                        document.getElementById("tidio-chat-iframe").style.bottom= ($("div#backTop.top-scroll").css("display")=="none" &&$(window).width()>977)>0? "-40px" : ($("div.toc-title").length&&$(window).width()>977)>0?"85px":"20px";
                        document.getElementById("tidio-chat-iframe").style.right="-15px";
                        document.getElementById("tidio-chat-iframe").style.height=parseInt(tidio.css("height"))>=520?"520px":tidio.css("height");
                        document.getElementById("tidio-chat-iframe").style.zIndex="997";
                    }
                    else if(tidio.css("display")=="block"&&$(window).width()>601 &&$(window).width()<992 ){
                        document.getElementById("tidio-chat-iframe").style.bottom= ($("div#backTop.top-scroll").css("display")=="none" && 601< $(window).width()<992)>0? "-40px":"20px" ;
                        document.getElementById("tidio-chat-iframe").style.right="-15px";
                        document.getElementById("tidio-chat-iframe").style.zIndex="997";
                    }
                    else if(tidio.css("display")=="block"&&$(window).width()<601 && parseInt(tidio.css("height"))<230){
                        document.getElementById("tidio-chat-iframe").style.bottom= ($("div#backTop.top-scroll").css("display")=="none" && $(window).width()<601)>0? "-10px":"45px" ;
                        document.getElementById("tidio-chat-iframe").style.zIndex="997";
                    }
                    if( tidio.css("display")=="block"&&$(window).width()<601 && parseInt(tidio.css("height"))>=230){
                        document.getElementById("tidio-chat-iframe").style.zIndex="998";
                    }
                }
            });
        </script>
    

    

    

    

    

    
    <script src="/libs/instantpage/instantpage.js" type="module"></script>
    

</body>

</html>
